<template>
    <div>
        <div class="danhao">
            <van-icon name="arrow-left" @click="$router.go(-1)"/>
            <h1>快递单</h1>
            </div>
        <van-search
  v-model="value"
  show-action
  label="地址"
   shape="round"
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch" id="action">搜索</div>
  </template>
 
</van-search>
  <van-empty image="search" description="没有搜索结果" v-if="Wuliu.length==0" />
    <div class="Bigbox" v-for="(item,index) in Wuliu" :key="index" >
      <div class="oneBox">
          <span>快递单号:{{item.orderCode}}</span>
          <van-icon name="arrow" />
      </div>
       <div class="twoBox">
           <div class="lp">
               <img src="../../assets/旗下企业-头像.png" alt="">
           </div>
           <div class="rp">
             <span>下单时间:{{item.createTime}}</span>
             <span>收货人:{{item.consignee}}</span>
             <span>发货人:{{item.consignor}}</span>
           </div>
       </div>
        <div class="sanBox">
            <van-button type="primary" @click="pingjian(item.id,item.orderCode)" v-if="item.star==0">评价{{item.star}}</van-button>
            <van-button type="primary" @click="pingjianp(item.id,item.orderCode)" v-if="item.star==1">查看评价{{item.star}}</van-button>
        </div>
    </div>
   
    </div>
</template>

<script>
import {GetStarDate} from '@/request/api'
export default {
    
    name:"Kuaitidan",
    data () {
        return {
          value:"",
         Wuliu:null
        }
    },
    methods:{
        onSearch(){
                      GetStarDate({keyword:this.value,current:'1',size:"20"}).then((res)=>{
            this.Wuliu=res.data.data.records
            console.log("物流单列表数据:",res);
        })
        },
        pingjian(val,item){
            this.$router.push(`/expressOrderEvaluation/${val}/${item}`)
            // console.log(666);
        },
        pingjianp(val){
            console.log(66);
             this.$router.push(`/comments/${val}`)
        }
    },
    created(){
        GetStarDate({keyword:'',current:'1',size:"20"}).then((res)=>{
            this.Wuliu=res.data.data.records
            console.log("物流单列表数据:",res);
        })
    }
}
</script>
 
<style lang = "less" scoped>
    .danhao{
        font-size: .14rem;
        height: .5rem;
        background: #003399;
        color: white;
        display: flex;
        align-items: center;
        .van-icon{
           
        }
        h1{
            flex: 1;
            text-align: center;
        }
    }
    #action{
        color: #003399;
    }
    .Bigbox{
        margin-top: .15rem;
        background: #fff;
        font-size: .14rem;
        padding: 0 .15rem;
        .oneBox{
            height: .5rem;
            line-height: .5rem;
            display: flex;
            align-items: center;
           
            .van-icon{
                flex: 1;
                text-align: right;
            }
        }
        .twoBox{
            display: flex;
            .lp{
                img{
                    width: .8rem;
                }
            }
            .rp{
                span{
                   display: block;
    height: 0.3rem;
    line-height: 0.2rem;
    margin-left: 0.15rem;
                }
            }
            
        }
        .sanBox{
            text-align: right;
                padding: .15rem 0;
            .van-button{
background-color: #ffcc33;
    border: 1px solid #ffcc33;
    border-radius: .15rem;
            }
        }
    }
</style>